import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker, Modal, Table } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import Cate_son from './components/cate_son'
import { apiGetGoodsClassifyTreeAll, apiGetGoodsClassifyEdit, apiGetGoodsClassifyDel, apiGetGoodsClassifyView, apiGetGoodsClassifyAdd } from '@/request/mallManagement/index.jsx'
// import { apiGoodsClassifyTree } from '@/request/storageManager/store.js'
export default class OutPut extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: "显示名称",
                    dataIndex: "label",
                    key: "label",
                    render: (text, render) => {
                        return text
                    }
                }, {
                    title: "别名",
                    dataIndex: "alias",
                    key: "alias",
                    render: (text, render) => {
                        return text
                    }
                }, {
                    title: "操作",
                    width: 300,
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['storage:store:cateEdit']} onClick={() => this.edit(render)}>编辑</TheButton>
                            <TheButton haspermi={['storage:store:cateDel']} onClick={() => this.del(render)}>删除</TheButton>
                            {
                                render.deep < 2 ? <TheButton haspermi={['storage:store:cateSetSon']} onClick={() => this.setSon(render)}>子分类设置</TheButton> : null
                            }

                        </div>
                    }
                },
            ],
            dataSource: [
            ],
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            isModalVisible: false,
            sonCateShow: false,
            loading: false,
            level: 0,
            modalTitle: '',
            goodsClassifyId: '',
            row: {}
        }
    }
    componentDidMount() {
        this.getData()
    }
    async getData() {
        let res = await apiGetGoodsClassifyTreeAll()
        if (res.code === 0) {
            this.setState({
                dataSource: this.guide(res.data, 0, '0', ''),
                total:res.data.total
            })
        }
    }
    guide(data, deep, parentID, parentName) {
        return data.map(item => {
            if (item.hasOwnProperty('children') && item.children && item.children.length > 0) {
                return {
                    ...item,
                    key: item.value,
                    deep,
                    children: this.guide(item.children, deep + 1, item.value, parentName + `${parentName === '' ? '' : '>'}` + item.label),
                    parentID,
                    parentName: parentID === '0' ? '' : parentName
                }
            } else {
                return {
                    ...item,
                    key: item.value,
                    deep,
                    parentID,
                    parentName: parentID === '0' ? '' : parentName
                }
            }

        })
    }
    setSon(row) {
        console.log(row);
        this.setState({
            row: {
                deep: row.deep + 1,
                parentID: row.value
            },
            isModalVisible: true,
            modalTitle: '子分类设置' + `(${row.parentName + `${row.parentName === '' ? '' : '>'}` + row.label})`
        })
    }
    async del(row) {
        React.$confirm({
            title: "提示",
            type: 'warning',
            content: "确定是否删除？",
            onOk: async () => {
                let res = await apiGetGoodsClassifyDel({ goodsClassifyId: row.value })
                if (res.code === 0) {
                    React.$message({
                        type: 'success',
                        content: res.codeMessage
                    })
                } else {
                    React.$message({
                        type: 'warning',
                        content: res.codeMessage
                    })
                }

                this.getData()

            }
        });


    }
    async edit(row) {
        console.log(row);
        let res = await apiGetGoodsClassifyView({ goodsClassifyId: row.value })
        if (res.code === 0) {
            this.setState({
                isModalVisible: true,
                goodsClassifyId: row.value,
                row: row,
                modalTitle: '编辑'
            }, () => {
                this.formRef.current.setFieldsValue({
                    goodsClassifyName: res.data.goodsClassifyName,
                    alias: res.data.alias,
                })
            })

        }
    }
    async onFinish() {
        let values = this.formRef.current.getFieldsValue()
        if (this.state.goodsClassifyId === '') {
            let res = await apiGetGoodsClassifyAdd({ goodsClassifyName: values.goodsClassifyName,alias:values.alias, level: this.state.row.deep, sourceId: this.state.row.deep === 0 ? '0' : this.state.row.parentID })
            if (res.code === 0) {
                this.reset()
                this.setState({
                    goodsClassifyId: '',
                    row: {},
                    isModalVisible: false
                })
            }
        } else {
            let res = await apiGetGoodsClassifyEdit({ goodsClassifyId: this.state.row.value,alias:values.alias, goodsClassifyName: values.goodsClassifyName, level: this.state.row.deep, sourceId: this.state.row.deep === 0 ? '0' : this.state.row.parentID })
            if (res.code === 0) {
                this.reset()
                this.setState({
                    goodsClassifyId: '',
                    row: {},
                    isModalVisible: false
                })
            }
        }
        this.getData()
    }
    reset() {
        this.formRef.current.setFieldsValue({
            goodsClassifyName: '',
            alias:''
        })
    }
    onCancel() {
        this.reset()
        this.setState({ isModalVisible: false })
    }

    render() {
        let { columns, dataSource, pageData, modalTitle, total, isModalVisible, loading, sonCateShow } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                {/* <Form layout={'inline'} ref={this.formRef} onFinish={this.onFinish} style={{ marginBottom: 12 }}>
                    <Form.Item name={"storeServiceName"}>
                        <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"服务名称"} />
                    </Form.Item>

                    <Form.Item>
                        <Space size="small" style={{ marginLeft: 10 }}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button onClick={()=>this.reset()}>重置</Button>
                        </Space>
                    </Form.Item>
                </Form> */}
                <div style={{ marginBottom: 12 }}>
                    <TheButton haspermi={['storage:store:cateAdd']} size="middle" onClick={() => this.setState({
                        isModalVisible: true, row: { deep: 0, parentID: '0' }, goodsClassifyId: '', modalTitle: '新增'
                    })} type="primary">新增</TheButton>
                </div>
                <Table
                    bordered={true}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                />
                
                <Modal title={modalTitle} visible={isModalVisible} width="30%"
                    onCancel={() => this.onCancel()} footer={null}
                >
                    <Form
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 20,
                        }}
                        ref={this.formRef}
                        onFinish={(values) => this.onFinish(values)}
                    >
                        <Form.Item
                            label="分类名称"
                            name="goodsClassifyName"
                        >
                            <Input style={{
                            }} placeholder='分类名称' />
                        </Form.Item>
                        <Form.Item
                            label="别名"
                            name="alias"
                        >
                            <Input style={{
                            }} placeholder='别名' />
                        </Form.Item>
                        <Form.Item wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}>
                            <Space size="small" style={{ marginLeft: 10 }}>

                                <Button type="default" onClick={() => this.reset()}>
                                    重置
                                </Button>
                                <Button type="primary" htmlType="submit" loading={loading}>
                                    确定
                                </Button>
                            </Space>
                        </Form.Item>

                    </Form>
                </Modal>
            </div>
        );
    }
}
